<script setup>
import { defineEmits } from 'vue';
import { useRouter } from 'vue-router';
import { useMessage } from 'naive-ui';
import { Awaken , Unbinding } from '@/api';
import { Dialog } from '@varlet/ui'
import '@varlet/ui/es/dialog/style/index.js';

const emits = defineEmits(['updateCode','homeRenew','refresh']);

const router = useRouter();
const message = useMessage();

const props = defineProps(['user'])

function getTimeDifference(time) {
  let time1 = new Date();
  let time2 = new Date(time);
  let diffTime = Math.round(Math.abs(time1.getTime() - time2.getTime()) / 1000);
  let day = parseInt(diffTime / (60 * 60 * 24));
  let hours = parseInt(diffTime % (60 * 60 * 24) / (60 * 60));
  let minutes = parseInt(diffTime % (60 * 60) / 60);
  // 按字符串方式返回, 不够灵活
  return day + '天 ' + hours + '小时 ' + minutes + '分钟';
}
const GoSetting = () => {
  console.log(props.user.wxid);
  router.push(`/settings/${props.user.wxid}`);
}
// 解绑
const Unbind = async () => {
  console.log(props.user.wxid);
  let r = await Unbinding(props.user.k);
  if (r.code != 200) {
    return message.error(r.msg);
  }
  emits('refresh'); // 刷新列表
  return message.success(r.msg);
}

// 续费
const Renew = () => {
  console.log(props.user.wxid);
  emits('homeRenew', props.user.wxid, props.user.nick_name);
}

// 唤醒
const Online = async () => {
  console.log('开始唤醒' , props.user.k);
  let messageReactive = message.loading('正在唤醒', {duration: 0});
  let r = await Awaken(props.user.k);
  console.log('唤醒返回', r);
  if (r.code == 400) {
    messageReactive.destroy();
    messageReactive = null;
    return Dialog({
      title: '唤醒失败',
      message: '是否进行二次取码？',
      closeOnClickOverlay: false,
      onConfirm: ()=> {
        // 发送事件
        emits('updateCode', props.user.k);
      }
    });
    // 处理二次取码
  }
  if (r.code == 200) {
    if (JSON.stringify(r.data.uuid) != '') {
      console.log('打开微信进行唤醒');
      emits('updateCode');
      messageReactive.destroy();
      messageReactive = null;
      return false;
    } else {
      emits('updateCode', props.user.k);
      messageReactive.destroy();
      messageReactive = null;
      return false;
    }
  }
  messageReactive.destroy();
  messageReactive = null;
  message.warning(r.msg);
}

</script>
<template>
  <div class="list">
    <n-card>
      <div class="flex-box">
        <var-image
          width="65px"
          height="65px"
          fit="cover"
          :radius="10"
          :src="props.user.head_url"
        />
        <div v-if="(props.user.time == 0)">
          <div class="nick-lg">{{ props.user.nick_name }}</div>
        </div>
        <div v-else class="info">
          <div class="nick">{{ props.user.nick_name }}</div>
          <div  class="time">到期时间：<span class="date">{{ getTimeDifference(props.user.expiration * 1000) }}</span></div>
        </div>
      </div>
      <template #footer>
        <var-divider />
        <n-button-group size="large">
              <n-button ghost @click="GoSetting">
                <template #icon>
                  <var-icon name="cog" />
                </template>
                设置
              </n-button>
              <n-button ghost @click="Renew">
                <template #icon>
                  <var-icon name="wrench" />
                </template>
                续费
              </n-button>
            <n-button ghost @click="Online">
              <template #icon>
                <var-icon name="upload" />
              </template>
              上线
            </n-button>
            <n-button ghost @click="Unbind">
              <template #icon>
                <var-icon name="window-close" />
              </template>
              解绑
            </n-button>
        </n-button-group>
      </template>
  </n-card>
  </div>
</template>

<style scoped>
* {
  --n-border: 0 !important;
  --n-border-hover: 0 !important;
  --n-border-pressed: 1px solid #3a7afe !important;
  --n-border-focus: 1px solid #3a7afe !important;
  --n-text-color-hover: #3a7afe !important;
  --n-text-color-pressed: #3a7afe !important;
  --n-text-color-focus: #3a7afe !important;
  --n-ripple-color: #3a7afe !important;
  --snackbar-success-background: #333 !important;
}
.list {
  padding: 10px;
}
.nick {
  margin-top: 13px;
  font-size: 1rem;
  line-height: 1.2;
  text-overflow: ellipsis;
}
.nick-lg {
  margin-top: 20px;
  font-size: 1rem;
  margin-left: 14px;
  line-height: 1.6;
  text-overflow: ellipsis;
}
.time {
  padding-top: 3px;
  color: rgba(0,0,0,.6);
}
.date {
  color: #3a7afe;
}
.flex-box {
  display: flex;
}
.info {
  padding-left: 10px;
}
.list > .n-card > :deep(.n-card__footer) {
  padding: 0;
}
.var-divider {
  border: 0;
}
.n-card {
  width: 23rem;
}
</style>